1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
import {
Button,
Form,
FormButtons,
FormField,
FormSubmitButton,
Label,
Loading,
TextField,
} from '@umami/react-zen';
import { useMessages, useUpdateQuery, useWebsiteSegmentQuery } from '@/components/hooks';
import { FieldFilters } from '@/components/input/FieldFilters';
import { messages } from '@/components/messages';
export function SegmentEditForm({
segmentId,
websiteId,
filters = [],
showFilters = true,
onSave,
onClose,
}: {
segmentId?: string;
websiteId: string;
filters?: any[];
showFilters?: boolean;
onSave?: () => void;
onClose?: () => void;
}) {
const { data } = useWebsiteSegmentQuery(websiteId, segmentId);
const { formatMessage, labels, getErrorMessage } = useMessages();
const { mutateAsync, error, isPending, touch, toast } = useUpdateQuery(
`/websites/${websiteId}/segments${segmentId ? `/${segmentId}` : ''}`,
{
type: 'segment',
},
);
const handleSubmit = async (formData: any) => {
await mutateAsync(formData, {
onSuccess: async () => {
toast(formatMessage(messages.saved));
touch('segments');
onSave?.();
onClose?.();
},
});
};
if (segmentId && !data) {
return <Loading placement="absolute" />;
}
return (
<Form
onSubmit={handleSubmit}
defaultValues={data || { parameters: { filters } }}
error={getErrorMessage(error)}
>
<FormField
name="name"
label={formatMessage(labels.name)}
rules={{ required: formatMessage(labels.required) }}
>
<TextField autoFocus={!segmentId} />
</FormField>
{showFilters && (
<>
<Label>{formatMessage(labels.filters)}</Label>
<FormField name="parameters.filters" rules={{ required: formatMessage(labels.required) }}>
<FieldFilters websiteId={websiteId} />
</FormField>
</>
)}
<FormButtons>
<Button isDisabled={isPending} onPress={onClose}>
{formatMessage(labels.cancel)}
</Button>
<FormSubmitButton variant="primary" data-test="button-submit" isDisabled={isPending}>
{formatMessage(labels.save)}
</FormSubmitButton>
</FormButtons>
</Form>
);
}
|